<template>
    <!-- v-text&v-html就类似于innerText和innerHtml -->
    <div class="person">
        <div>{{ message }}</div>
        <div v-text="message"></div>
        <div v-html="message"></div>
        <div v-html="url"></div>
    </div>
</template>

<script setup name="Person">
    import {reactive, ref} from "vue";

    let message = ref('<h3>你好</h3>')
    let url = ref('<a href="http://www.baidu.com">百度</a>')
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>